<!-- 用于考试界面，左侧信息栏，展示用户头像和考试题目目录 -->
<template>
  <div class="flex as-vertical y-center pb-6">
    <div id="123" class="mb-4 mt-5">
      <img src="@/assets/logo_long.png" width="120px">
    </div>

    <div shadow="hover" class="info-wrapper">
      <!-- 头像 -->
      <!-- <text-avatar :name="userName" size="medium" /> -->
      <div class="mb-5 flex as-vertical y-center">{{ userName }}</div>
      
      <div class="py-3" />
    </div>
    <div class="py-3" />
  </div>
</template>

<script>
import variables from '@/styles/variables.scss'
import TextAvatar from '@/components/TextAvatar.vue'

export default {
  components: {
    TextAvatar
  },
  props: {
    examId: {
      type: String,
      require: true,
      default: ''
    },
    // 题目列表单选题
    singleQuestions: {
      type: Array,
      require: true,
      default: () => []
    },
    // 题目列表多选题
    multipleQuestions: {
      type: Array,
      require: true,
      default: () => []
    }
  },
  data() {
    return {
      userName: this.$store.state.user.userName
    }
  },
  variables() {
    return variables
  },
  mounted() {},
  methods: {
    scrollTo(id) {
      const q = document.getElementById('question' + id)
      if (q) {
        console.log(q)
        console.log('定位到题目id：', id)
        q.scrollIntoView(true)
      }
      // this.$store.commit('exam/SET_PAPER_LOCATION', id)
    },
    resetPaper() {},
    savePaper() {},

    submitPaper() {
      console.log('SAVING')
      this.$store.commit('exam/WRITE_ANSWER', [123, '123'])
      this.$router.push('/')
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';

.info-wrapper {
  padding: 20px 30px;
  // background-color: #f8f8f8;
  border-radius: 8px;
}

.qlist-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  width: 260px;
}

.qlist-item {
  width: 40px;
  height: 40px;
  margin: 5px;
}
.selected {
  background-color: $primaryColor;
  border: 0px solid white;
  color: white;
}

.unselected {
  background-color: white;
  color: black;
}
</style>
